<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>传世心经-运营可视化</title>
    <link rel="stylesheet" href="styles/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="styles/bootstrap-table.css">
    <link rel="stylesheet" href="sfy/styles/fonts/iconfont.css">
    <link rel="stylesheet" href="styles/reset.css">
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="styles/sfy_nav.css">
    <link rel="stylesheet" href="styles/newstyle.css">
    <style>
    .con_breadcrumb{
        overflow: visible;
    }
    </style>
</head>
<body>
    <!--头部-->
    <!-- 新菜单 2018-04-08 -->
    <div class="new-header">
        <div class="header-content">
            <div class="header-menu">
                <a href="index.html" class="logo">
                    <img src="images/yly-logo.png" alt="">
                </a>
                <ul class="header-nav">
                    <li>基础资料</li>
                    <li>物流运营</li>
                    <li>财务管理</li>
                    <li>业务管理</li>
                    <li>统计查询</li>
                </ul>
                <div class="header-select">
                    <a>
                        <!-- <label class="common-menu-btn"><input type="checkbox" checked="checked"><span></span></label><span>关闭常用菜单</span> -->
                        <span class="common-menu-btn">常用菜单</span>
                    </a>
                    <a href="#" class="setting">设置</a>
                    <ul class="header-select-list">
                        <li>
                            <i class="community"></i>
                            <a href="#">传链社区</a>
                        </li>
                        <li>
                            <i class="tel"></i>
                            <a href="#">服务中心</a>
                        </li>
                        <li>
                            <i class="message current"></i>
                            <a href="#">消息中心</a>
                        </li>
                        <li>
                            <i href="javascript:;" class="login"></i>
                            <div class="userboxinfob">
                                <div class="ul_userlist">
                                    <p class="flexitem">张会员，欢迎您登录</p>
                                    <ul class="flexitem">
                                        <li>
                                            <a href="/updatePwd">修改密码</a>
                                        </li>
                                        <li>
                                            <a href="/logout">退出</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="header-menu-box">
                <div class="header-menu-content">
                    <dl class="displayflex">
                        <dt>组织资料 ></dt>
                        <dd class="flex1">
                            <a href="#">公司资料维护</a>
                            <a href="#">公司部门资料维护</a>
                            <a href="#">物流区域资料维护</a>
                            <a href="#">物流中心资料维护</a>
                            <a href="#">仓库资料</a>
                            <a href="#">货主仓库指定</a>
                            <a href="#">货主承运商指定</a>
                        </dd>
                    </dl>
                    <dl class="displayflex">
                        <dt>人员管理 ></dt>
                        <dd class="flex1">
                            <a href="#">公司人员角色维护</a>
                            <a href="#">公司人员资料维护</a>
                            <a href="#">货主人员资料维护</a>
                            <a href="#">承运商人员资料维护</a>
                            <a href="#">仓储商人员资料维护</a>
                            <a href="#">商业客户人员资料维护</a>
                        </dd>
                    </dl>
                    <dl class="displayflex">
                        <dt>商品管理 ></dt>
                        <dd class="flex1">
                            <a href="#">新品发布清单</a>
                            <a href="#">生产厂商资料维护</a>
                            <a href="#">商品分类资料表</a>
                            <a href="#">库管参数维护</a>
                            <a href="#">补货层级维护</a>
                            <a href="#">新增商品</a>
                            <a href="#">商品资料维护</a>
                            <a href="#" class="active">产品说明书维护</a>
                            <a href="#">物价资料维护</a>
                            <a href="#">耗材包关系维护</a>
                            <a href="#">耗材包关系维护</a>
                        </dd>
                    </dl>
                    <dl class="displayflex">
                        <dt>产品证照 ></dt>
                        <dd class="flex1">
                            <a href="#">代理商证照维护</a>
                            <a href="#">经销授权书证照维护</a>
                            <a href="#">售后服务机构证照维护</a>
                            <a href="#">医疗器械注册证维护</a>
                            <a href="#">业务授权书维护</a>
                        </dd>
                    </dl>
                    <dl class="displayflex">
                        <dt>客户管理 ></dt>
                        <dd class="flex1">
                            <a href="#">商业单位资料维护</a>
                            <a href="#">医疗机构资料维护</a>
                        </dd>
                    </dl>
                </div>
                <div class="header-menu-content">
                    <dl class="displayflex">
                        <dt>物流运营 ></dt>
                        <dd class="flex1">
                            <a href="#">公司资料维护</a>
                            <a href="#">公司部门资料维护</a>
                            <a href="#">物流区域资料维护</a>
                            <a href="#">物流中心资料维护</a>
                            <a href="#">仓库资料</a>
                            <a href="#">货主仓库指定</a>
                            <a href="#">货主承运商指定</a>
                        </dd>
                    </dl>
                    <dl class="displayflex">
                        <dt>人员管理 ></dt>
                        <dd class="flex1">
                            <a href="#">公司人员角色维护</a>
                            <a href="#">公司人员资料维护</a>
                            <a href="#">货主人员资料维护</a>
                            <a href="#">承运商人员资料维护</a>
                            <a href="#">仓储商人员资料维护</a>
                            <a href="#">商业客户人员资料维护</a>
                        </dd>
                    </dl>
                    <dl class="displayflex">
                        <dt>商品管理 ></dt>
                        <dd class="flex1">
                            <a href="#">新品发布清单</a>
                            <a href="#">生产厂商资料维护</a>
                            <a href="#">商品分类资料表</a>
                            <a href="#">库管参数维护</a>
                            <a href="#">补货层级维护</a>
                            <a href="#">新增商品</a>
                            <a href="#">商品资料维护</a>
                            <a href="#" class="active">产品说明书维护</a>
                            <a href="#">物价资料维护</a>
                            <a href="#">耗材包关系维护</a>
                            <a href="#">耗材包关系维护</a>
                        </dd>
                    </dl>
                    <dl class="displayflex">
                        <dt>客户管理 ></dt>
                        <dd class="flex1">
                            <a href="#">商业单位资料维护</a>
                            <a href="#">医疗机构资料维护</a>
                        </dd>
                    </dl>
                    <dl class="displayflex">
                        <dt>医院关系建立 ></dt>
                        <dd class="flex1">
                            <a href="#">采购目录勾对</a>
                        </dd>
                    </dl>
                </div>
                <div class="header-menu-content">
                    <dl class="displayflex">
                        <dt>财务管理 ></dt>
                        <dd class="flex1">
                            <a href="#">公司资料维护</a>
                            <a href="#">公司部门资料维护</a>
                            <a href="#">物流区域资料维护</a>
                            <a href="#">物流中心资料维护</a>
                            <a href="#">仓库资料</a>
                            <a href="#">货主仓库指定</a>
                            <a href="#">货主承运商指定</a>
                        </dd>
                    </dl>
                    <dl class="displayflex">
                        <dt>人员管理 ></dt>
                        <dd class="flex1">
                            <a href="#">公司人员角色维护</a>
                            <a href="#">公司人员资料维护</a>
                            <a href="#">货主人员资料维护</a>
                            <a href="#">承运商人员资料维护</a>
                            <a href="#">仓储商人员资料维护</a>
                            <a href="#">商业客户人员资料维护</a>
                        </dd>
                    </dl>
                    <dl class="displayflex">
                        <dt>商品管理 ></dt>
                        <dd class="flex1">
                            <a href="#">新品发布清单</a>
                            <a href="#">生产厂商资料维护</a>
                            <a href="#">商品分类资料表</a>
                            <a href="#">库管参数维护</a>
                            <a href="#">补货层级维护</a>
                            <a href="#">新增商品</a>
                            <a href="#">商品资料维护</a>
                            <a href="#" class="active">产品说明书维护</a>
                            <a href="#">物价资料维护</a>
                            <a href="#">耗材包关系维护</a>
                        </dd>
                    </dl>
                    <dl class="displayflex">
                        <dt>产品证照 ></dt>
                        <dd class="flex1">
                            <a href="#">代理商证照维护</a>
                            <a href="#">经销授权书证照维护</a>
                            <a href="#">售后服务机构证照维护</a>
                            <a href="#">医疗器械注册证维护</a>
                            <a href="#">业务授权书维护</a>
                        </dd>
                    </dl>
                    <dl class="displayflex">
                        <dt>客户管理 ></dt>
                        <dd class="flex1">
                            <a href="#">商业单位资料维护</a>
                            <a href="#">医疗机构资料维护</a>
                        </dd>
                    </dl>
                    <dl class="displayflex">
                        <dt>医院关系建立 ></dt>
                        <dd class="flex1">
                            <a href="#">供应关系查询</a>
                            <a href="#">采购目录勾对</a>
                        </dd>
                    </dl>
                </div>
                <div class="header-menu-content">
                    <dl class="displayflex">
                        <dt>业务管理 ></dt>
                        <dd class="flex1">
                            <a href="#">公司资料维护</a>
                            <a href="#">公司部门资料维护</a>
                            <a href="#">物流区域资料维护</a>
                            <a href="#">物流中心资料维护</a>
                            <a href="#">仓库资料</a>
                            <a href="#">货主仓库指定</a>
                            <a href="#">货主承运商指定</a>
                        </dd>
                    </dl>
                    <dl class="displayflex">
                        <dt>人员管理 ></dt>
                        <dd class="flex1">
                            <a href="#">公司人员角色维护</a>
                            <a href="#">公司人员资料维护</a>
                            <a href="#">货主人员资料维护</a>
                            <a href="#">承运商人员资料维护</a>
                            <a href="#">仓储商人员资料维护</a>
                            <a href="#">商业客户人员资料维护</a>
                        </dd>
                    </dl>
                    <dl class="displayflex">
                        <dt>商品管理 ></dt>
                        <dd class="flex1">
                            <a href="#">新品发布清单</a>
                            <a href="#">生产厂商资料维护</a>
                            <a href="#">商品分类资料表</a>
                            <a href="#">库管参数维护</a>
                            <a href="#">补货层级维护</a>
                            <a href="#">新增商品</a>
                            <a href="#">商品资料维护</a>
                            <a href="#" class="active">产品说明书维护</a>
                            <a href="#">物价资料维护</a>
                            <a href="#">耗材包关系维护</a>
                            <a href="#">耗材包关系维护</a>
                        </dd>
                    </dl>
                    <dl class="displayflex">
                        <dt>产品证照 ></dt>
                        <dd class="flex1">
                            <a href="#">代理商证照维护</a>
                            <a href="#">经销授权书证照维护</a>
                            <a href="#">售后服务机构证照维护</a>
                            <a href="#">医疗器械注册证维护</a>
                            <a href="#">业务授权书维护</a>
                        </dd>
                    </dl>
                    <dl class="displayflex">
                        <dt>客户管理 ></dt>
                        <dd class="flex1">
                            <a href="#">商业单位资料维护</a>
                            <a href="#">医疗机构资料维护</a>
                        </dd>
                    </dl>
                    <dl class="displayflex">
                        <dt>医院关系建立 ></dt>
                        <dd class="flex1">
                            <a href="#">供应关系查询</a>
                            <a href="#">采购目录勾对</a>
                        </dd>
                    </dl>
                </div>
                <div class="header-menu-content">
                    <dl class="displayflex">
                        <dt>统计查询 ></dt>
                        <dd class="flex1">
                            <a href="#">公司资料维护</a>
                            <a href="#">公司部门资料维护</a>
                            <a href="#">物流区域资料维护</a>
                            <a href="#">物流中心资料维护</a>
                            <a href="#">仓库资料</a>
                            <a href="#">货主仓库指定</a>
                            <a href="#">货主承运商指定</a>
                        </dd>
                    </dl>
                    <dl class="displayflex">
                        <dt>人员管理 ></dt>
                        <dd class="flex1">
                            <a href="#">公司人员角色维护</a>
                            <a href="#">公司人员资料维护</a>
                            <a href="#">货主人员资料维护</a>
                            <a href="#">承运商人员资料维护</a>
                            <a href="#">仓储商人员资料维护</a>
                            <a href="#">商业客户人员资料维护</a>
                        </dd>
                    </dl>
                    <dl class="displayflex">
                        <dt>商品管理 ></dt>
                        <dd class="flex1">
                            <a href="#">新品发布清单</a>
                            <a href="#">生产厂商资料维护</a>
                            <a href="#">商品分类资料表</a>
                            <a href="#">库管参数维护</a>
                            <a href="#">补货层级维护</a>
                            <a href="#">新增商品</a>
                            <a href="#">商品资料维护</a>
                            <a href="#" class="active">产品说明书维护</a>
                            <a href="#">物价资料维护</a>
                            <a href="#">耗材包关系维护</a>
                            <a href="#">耗材包关系维护</a>
                        </dd>
                    </dl>
                    <dl class="displayflex">
                        <dt>产品证照 ></dt>
                        <dd class="flex1">
                            <a href="#">代理商证照维护</a>
                            <a href="#">经销授权书证照维护</a>
                            <a href="#">售后服务机构证照维护</a>
                            <a href="#">医疗器械注册证维护</a>
                            <a href="#">业务授权书维护</a>
                        </dd>
                    </dl>
                    <dl class="displayflex">
                        <dt>客户管理 ></dt>
                        <dd class="flex1">
                            <a href="#">商业单位资料维护</a>
                            <a href="#">医疗机构资料维护</a>
                        </dd>
                    </dl>
                    <dl class="displayflex">
                        <dt>医院关系建立 ></dt>
                        <dd class="flex1">
                            <a href="#">供应关系查询</a>
                            <a href="#">采购目录勾对</a>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
   
    <!-- 按钮 当前位置-->
    <div class="g_header_nav">
        <div class="g_header_t">
            <div class="operate-btns">
            </div>
        </div>
        <div class="con_breadcrumb">
            <ol class="breadcrumb">
                <li>
                    <a href="#">运营可视化</a>
                </li>
            </ol>
            <h3 class="current_module">运营可视化</h3>
            <dl class="visual-quarter">
                <dt>季度<i class="iconfont icon-more"></i></dt>
                <dd>
                    <a href="">2017年 截止9月30日</a>
                    <a href="">2017年 截止12月31日</a>
                    <a href="">2018年 截止3月31日</a>
                    <a href="">2018年 截止今日</a>
                </dd>
            </dl>
        </div>
    </div>
    <!--end头部-->
    <div class="content visual-content">
        <ul class="visual-content-top">
            <li>
                <div class="iconfont icon-vCar">
                    <span>物流累计货量</span>
                    <p><b>2064987</b>件</p>
                </div>
            </li>
            <li>
                <div class="iconfont icon-vMoney">
                    <span>医院供采交易额</span>
                    <p><b>21766</b>万元</p>
                </div>
            </li>
            <li>
                <div class="iconfont icon-vLine">
                    <span>物流线路</span>
                    <p><b>1202</b>条</p>
                </div>
            </li>
            <li>
                <div class="iconfont icon-vOrder">
                    <span>物流网点数</span>
                    <p><b>326</b>个</p>
                </div>
            </li>
            <li>
                <div class="iconfont icon-vCustomer">
                    <span>物流客户数</span>
                    <p><b>2545</b>家</p>
                </div>
            </li>
            <li>
                <div class="iconfont icon-vWarehouse">
                    <span>仓库面积</span>
                    <p><b>23</b>万平</p>
                </div>
            </li>
        </ul>
        <div class="visual-content-middle">
            <!-- 年度运营数据 -->
            <div class="visual-content-mLeft">
                <div class="box-foot">
                    <table class="table table-visual">
                        <thead>
                            <tr>
                                <th class="th-blue"><em>2018</em>年<p>运营数据</p></th>
                                <th>物流公司</th>
                                <th>医院</th>
                                <th>药企</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <div class="td-first">数量（家）</div>
                                </td>
                                <td class="num td-blue">120</td>
                                <td class="num td-green">65</td>
                                <td class="num td-red">38</td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="td-first">
                                        <p>年日均交易额</p><span>（万元）</span>
                                    </div>
                                </td>
                                <td class="num td-blue">2.98</td>
                                <td class="num td-green">2.98</td>
                                <td class="num td-red">2</td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="td-first">
                                        <p>总交易金额</p><span>（万元）</span>
                                    </div>
                                </td>
                                <td class="num td-blue">1028</td>
                                <td class="num td-green">1403</td>
                                <td class="num td-red">630</td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="box-foot2"></div>
                </div>
                <div class="box-foot">
                    <table class="table table-visual">
                        <thead>
                            <tr>
                                <th><em>2017</em>年<p>运营数据</p></th>
                                <th>物流公司</th>
                                <th>医院</th>
                                <th>药企</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <div class="td-first">数量（家）</div>
                                </td>
                                <td class="num td-blue">120</td>
                                <td class="num td-green">65</td>
                                <td class="num td-red">38</td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="td-first">
                                        <p>年日均交易额</p><span>（万元）</span>
                                    </div>
                                </td>
                                <td class="num td-blue">2.98</td>
                                <td class="num td-green">2.98</td>
                                <td class="num td-red">2</td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="td-first">
                                        <p>总交易金额</p><span>（万元）</span>
                                    </div>
                                </td>
                                <td class="num td-blue">10028</td>
                                <td class="num td-green">10403</td>
                                <td class="num td-red">20630</td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="box-foot2"></div>
                </div>
            </div>
            <!-- 运力分布图 -->
            <div class="visual-content-mCenter">
                <div class="box-foot">
                    <!-- <h3 class="visual-tit">运力分布图</h3> -->
                    <div id="echarts1" class="visual-map"></div>
                    <div class="map-enlarge" ></div>
                    <div class="map-narrow" ></div>
                    <div class="box-foot2"></div>
                </div>
            </div>
            <!-- 医院供采 -->
            <div class="visual-content-mRight box-foot">
                <h3 class="visual-tit">医院供采-2018年度占比统计</h3>
                <div class="visual-echart-group">
                    <div id="echarts4" class="visual-pie"></div>
                    <div id="echarts5" class="visual-pie"></div>
                </div>
                <div class="box-foot2"></div>
            </div>
        </div>
        <div class="visual-content-bottom">
            <!-- 发货量 & 承运量 -->
            <div class="visual-content-bLeft box-foot">
                <h3 class="visual-tit visual-tit-l">2018年 医药发货总量：<b>500,000</b>万件</h3>
                <h4 class="visual-tit2">货主发货量 TOP 5</h4>
                <div id="echarts2" class="visual-bar1"></div>
                
                <h4 class="visual-tit2">物流公司承运量 TOP 5</h4>
                <div id="echarts3" class="visual-bar1"></div>

                <h4 class="visual-tit2">2018年 传世运营货量 总量占比<b>14</b>%</h4>
                <div id="echarts9" class="visual-bar1" style="height: 87px;"></div>
                <div class="box-foot2"></div>
            </div>

            <div class="visual-content-bRight box-foot">
                <h3 class="visual-tit visual-tit-l">医药物流-2018年度收发货量排名</h3>

                    <h4 class="visual-tit2">地区发货量 TOP 5</h4>
                    <div id="echarts7" class="visual-bar3"></div>

                    <h4 class="visual-tit2">地区收货量 TOP 5</h4>
                    <div id="echarts8" class="visual-bar3"></div>
                <div class="box-foot2"></div>
            </div>
        </div>
    </div>

    <script src="lib/jquery.min.js"></script>
    <script src="lib/echarts.js"></script>
    <script src="lib/china.js"></script>
    <script type="text/javascript" src="js/header_sfy.js"></script>
    <script src="js/visual-echarts.js"></script>
    <script>
    $(function () {
        $(".map-enlarge").click(function () {
            $(this).removeClass('map-enlarge1').addClass('map-enlarge2');
            $(".visual-map").removeClass('visual-map2').addClass('visual-map1');
            $(".map-narrow").removeClass('map-narrow2').addClass('map-narrow1')
            $(window).scroll(function () {
                $(window).scrollTop(0);
            });
        });
        $(".map-narrow").click(function () {
            $(this).removeClass('map-narrow1').addClass('map-narrow2');
            $(".map-enlarge").removeClass('map-enlarge2').addClass('map-enlarge1');
            $(".visual-map").removeClass('visual-map1').addClass('visual-map2');
            $(window).unbind('scroll');
        });
    })
    </script>
</body>
</html>